<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="author" content="ZhangPing">





<title>Flutter--Container组件、Text组件 | ZhangPing&#39;s Blog</title>



    <link rel="icon" href="/favicon.ico">




    <!-- stylesheets list from _config.yml -->
    
    <link rel="stylesheet" href="/css/style.css">
    



    <!-- scripts list from _config.yml -->
    
    <script src="/js/script.js"></script>
    
    <script src="/js/tocbot.min.js"></script>
    



    
    
        
    


<meta name="generator" content="Hexo 4.2.0"></head>
<body>
    <div class="wrapper">
        <header>
    <nav class="navbar">
        <div class="container">
            <div class="navbar-header header-logo"><a href="/">ZhangPing&#39;s Blog</a></div>
            <div class="menu navbar-right">
                
                    <a class="menu-item" href="/archives">Posts</a>
                
                    <a class="menu-item" href="/category">Categories</a>
                
                    <a class="menu-item" href="/tag">Tags</a>
                
                    <a class="menu-item" href="/about">About</a>
                
                <input id="switch_default" type="checkbox" class="switch_default">
                <label for="switch_default" class="toggleBtn"></label>
            </div>
        </div>
    </nav>

    
    <nav class="navbar-mobile" id="nav-mobile">
        <div class="container">
            <div class="navbar-header">
                <div>
                    <a href="/">ZhangPing&#39;s Blog</a><a id="mobile-toggle-theme">·&nbsp;Light</a>
                </div>
                <div class="menu-toggle" onclick="mobileBtn()">&#9776; Menu</div>
            </div>
            <div class="menu" id="mobile-menu">
                
                    <a class="menu-item" href="/archives">Posts</a>
                
                    <a class="menu-item" href="/category">Categories</a>
                
                    <a class="menu-item" href="/tag">Tags</a>
                
                    <a class="menu-item" href="/about">About</a>
                
            </div>
        </div>
    </nav>

</header>
<script>
    var mobileBtn = function f() {
        var toggleMenu = document.getElementsByClassName("menu-toggle")[0];
        var mobileMenu = document.getElementById("mobile-menu");
        if(toggleMenu.classList.contains("active")){
           toggleMenu.classList.remove("active")
            mobileMenu.classList.remove("active")
        }else{
            toggleMenu.classList.add("active")
            mobileMenu.classList.add("active")
        }
    }
</script>
        <div class="main">
            <div class="container">
    
    
        <div class="post-toc">
    <div class="tocbot-list">
    </div>
    <div class="tocbot-list-menu">
        <a class="tocbot-toc-expand" onclick="expand_toc()">Expand all</a>
        <a onclick="go_top()">Back to top</a>
        <a onclick="go_bottom()">Go to bottom</a>
    </div>
</div>

<script>
    document.ready(
        function () {
            tocbot.init({
                tocSelector: '.tocbot-list',
                contentSelector: '.post-content',
                headingSelector: 'h1, h2, h3, h4, h5',
                collapseDepth: 1,
                orderedList: false,
                scrollSmooth: true,
            })
        }
    )

    function expand_toc() {
        var b = document.querySelector(".tocbot-toc-expand");
        tocbot.init({
            tocSelector: '.tocbot-list',
            contentSelector: '.post-content',
            headingSelector: 'h1, h2, h3, h4, h5',
            collapseDepth: 6,
            orderedList: false,
            scrollSmooth: true,
        });
        b.setAttribute("onclick", "collapse_toc()");
        b.innerHTML = "Collapse all"
    }

    function collapse_toc() {
        var b = document.querySelector(".tocbot-toc-expand");
        tocbot.init({
            tocSelector: '.tocbot-list',
            contentSelector: '.post-content',
            headingSelector: 'h1, h2, h3, h4, h5',
            collapseDepth: 1,
            orderedList: false,
            scrollSmooth: true,
        });
        b.setAttribute("onclick", "expand_toc()");
        b.innerHTML = "Expand all"
    }

    function go_top() {
        window.scrollTo(0, 0);
    }

    function go_bottom() {
        window.scrollTo(0, document.body.scrollHeight);
    }

</script>
    

    
    <article class="post-wrap">
        <header class="post-header">
            <h1 class="post-title">Flutter--Container组件、Text组件</h1>
            
                <div class="post-meta">
                    
                        Author: <a itemprop="author" rel="author" href="/">ZhangPing</a>
                    

                    
                        <span class="post-time">
                        Date: <a href="#">February 6, 2020&nbsp;&nbsp;19:45:00</a>
                        </span>
                    
                    
                        <span class="post-category">
                    Category:
                            
                                <a href="/categories/Flutter/">Flutter</a>
                            
                        </span>
                    
                </div>
            
        </header>

        <div class="post-content">
            <h3 id="一、FlutterText-组件"><a href="#一、FlutterText-组件" class="headerlink" title="一、FlutterText 组件"></a>一、FlutterText 组件</h3><table>
<thead>
<tr>
<th>名称</th>
<th>功能</th>
</tr>
</thead>
<tbody><tr>
<td>textAlign</td>
<td>文本对齐方式（center 居中，left 左 对齐， right 右对齐， justfy 两端对齐）</td>
</tr>
<tr>
<td>textDirection</td>
<td>文本方向（ltr 从左至右，rtl 从右至 左）</td>
</tr>
<tr>
<td>overflow</td>
<td>文字超出屏幕之后的处理方式（clip 裁剪，fade 渐隐，ellipsis 省略号）</td>
</tr>
<tr>
<td>textScaleFactor</td>
<td>字体显示倍率</td>
</tr>
<tr>
<td>maxLines</td>
<td>文字显示最大行数</td>
</tr>
<tr>
<td>style</td>
<td>字体的样式设置</td>
</tr>
</tbody></table>
<h4 id="下面是-TextStyle-的参数"><a href="#下面是-TextStyle-的参数" class="headerlink" title="下面是 TextStyle 的参数"></a>下面是 TextStyle 的参数</h4><table>
<thead>
<tr>
<th>名称</th>
<th>功能</th>
</tr>
</thead>
<tbody><tr>
<td>decoration</td>
<td>文字装饰线（none 没有线，lineThrough 删 除线，overline 上划线，underline 下划线）</td>
</tr>
<tr>
<td>decorationColor</td>
<td>文字装饰线颜色</td>
</tr>
<tr>
<td>decorationStyle</td>
<td>文字装饰线风格（[dashed,dotted]虚线， double 两根线，solid 一根实线，wavy 波浪 线）</td>
</tr>
<tr>
<td>wordSpacing</td>
<td>单词间隙（如果是负值，会让单词变得更紧凑）</td>
</tr>
<tr>
<td>letterSpacing</td>
<td>字母间隙（如果是负值，会让字母变得更紧凑）</td>
</tr>
<tr>
<td>fontStyle</td>
<td>文字样式（italic 斜体，normal 正常体）</td>
</tr>
<tr>
<td>fontSize</td>
<td>文字大小</td>
</tr>
<tr>
<td>color</td>
<td>文字颜色</td>
</tr>
<tr>
<td>fontWeight</td>
<td>字体粗细（bold 粗体，normal 正常体）</td>
</tr>
</tbody></table>
<p>更多参数：<a href="https://docs.flutter.io/flutter/painting/TextStyle-class.html" target="_blank" rel="noopener">https://docs.flutter.io/flutter/painting/TextStyle-class.html</a></p>
<h3 id="二、FlutterContainer-组件"><a href="#二、FlutterContainer-组件" class="headerlink" title="二、FlutterContainer 组件"></a>二、FlutterContainer 组件</h3><table>
<thead>
<tr>
<th>名称</th>
<th>功能</th>
</tr>
</thead>
<tbody><tr>
<td>alignment</td>
<td>topCenter：顶部居中对齐 <br>  topLeft：顶部左对齐 <br>  topRight：顶部右对齐 <br>  center：水平垂直居中对齐 <br>  centerLeft：垂直居中水平居左对齐 <br>  centerRight：垂直居中水平居右对齐 <br>  bottomCenter 底部居中对齐 <br>  bottomLeft：底部居左对齐 <br>  bottomRight：底部居右对齐</td>
</tr>
<tr>
<td>decoration</td>
<td>decoration: BoxDecoration(  <br> color: Colors.blue,  <br> border: Border.all(  <br> color: Colors.red,  <br> width: 2.0,  <br> ),  <br> borderRadius: BorderRadius.all( Radius.circular(8.0)  <br> ))</td>
</tr>
<tr>
<td>margin</td>
<td>margin 属性是表示 Container 与外部其他组件的距离。  <br> EdgeInsets.all(20.0)</td>
</tr>
<tr>
<td>padding</td>
<td>padding 就是 Container 的内边距，指 Container 边缘与 Child 之间的距离  <br> padding: EdgeInsets.all(10.0)</td>
</tr>
<tr>
<td>transform</td>
<td>让 Container 容易进行一些旋转之类的 <br> transform: Matrix4.rotationZ(0.2)</td>
</tr>
<tr>
<td>height</td>
<td>容器高度</td>
</tr>
<tr>
<td>width</td>
<td>容器宽度</td>
</tr>
<tr>
<td>child</td>
<td>容器子元素</td>
</tr>
</tbody></table>
<p>更多参数：<a href="https://api.flutter.dev/flutter/widgets/Container-class.html" target="_blank" rel="noopener">https://api.flutter.dev/flutter/widgets/Container-class.html</a></p>

        </div>

        
            <section class="post-copyright">
                
                    <p class="copyright-item">
                        <span>Author:</span>
                        <span>ZhangPing</span>
                    </p>
                
                
                    <p class="copyright-item">
                        <span>Permalink:</span>
                        <span><a href="https://zhangpingv5.gitee.io/2020/02/06/Flutter--Container%E7%BB%84%E4%BB%B6%E3%80%81Text%E7%BB%84%E4%BB%B6/">https://zhangpingv5.gitee.io/2020/02/06/Flutter--Container%E7%BB%84%E4%BB%B6%E3%80%81Text%E7%BB%84%E4%BB%B6/</a></span>
                    </p>
                
                
                    <p class="copyright-item">
                        <span>License:</span>
                        <span>转载请注明出处</span>
                    </p>
                
                
                     <p class="copyright-item">
                         <span>Slogan:</span>
                         <span>Self-descipline grants me freedom.</span>
                     </p>
                

            </section>
        
        <section class="post-tags">
            <div>
                <span>Tag(s):</span>
                <span class="tag">
                    
                    
                        <a href="/tags/Flutter/"># Flutter</a>
                    
                        
                </span>
            </div>
            <div>
                <a href="javascript:window.history.back();">back</a>
                <span>· </span>
                <a href="/">home</a>
            </div>
        </section>
        <section class="post-nav">
            
                <a class="prev" rel="prev" href="/2020/02/07/Flutter--Image%E7%BB%84%E4%BB%B6/">Flutter--Image组件</a>
            
            
            <a class="next" rel="next" href="/2018/10/11/JMeter%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B/">JMeter使用教程</a>
            
        </section>


    </article>
</div>

        </div>
        <footer id="footer" class="footer">
    <div class="copyright">
        <span>© ZhangPing | Powered by <a href="https://hexo.io" target="_blank">Hexo</a> & <a href="https://github.com/Siricee/hexo-theme-Chic" target="_blank">Chic</a></span>
    </div>
</footer>

    </div>
</body>
</html>
